<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-09 20:41:16
 * @LastEditors: 任飞
 * @LastEditTime: 2020-06-23 16:06:04
 -->
<template>
  <div class="app-container">
    <!-- <el-date-picker v-model="datepicker" type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item" />
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="initData">查询</el-button>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-download" @click="exportData">导出数据</el-button>
    <div style="width:100%;height:20px;" />
    <div style="overflow:hidden" class="dashboard">
      <el-card class="box-card box-card-margin">
        <div slot="header" class="clearfix">
          <span>总访问量</span>
        </div>
        <el-row>
          <el-col :span="7">
            <p class="top-text padding-two">总点击次数</p>
            <p class="number-big number-cur padding-two">{{ statisticData.total.total }}</p>
          </el-col>
          <el-col :span="7" :offset="1">
            <p class="top-text padding-two">访问人数</p>
            <p class="number-big number-cur padding-two">{{ statisticData.total.person }}</p>
          </el-col>
          <el-col :span="7" :offset="1">
            <p class="top-text padding-two">平均点击人次</p>
            <p class="number-big number-cur padding-two">{{ statisticData.total.avg_visits }}</p>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card box-card-margin">
        <div slot="header" class="clearfix">
          <span>当前时间内访问</span>
        </div>
        <el-row>
          <el-col :span="7">
            <p class="top-text padding-two">总点击次数</p>
            <p class="number-big number-cur padding-two">{{ statisticData.cur.total }}</p>
          </el-col>
          <el-col :span="7" :offset="1">
            <p class="top-text padding-two">访问人数</p>
            <p class="number-big number-cur padding-two">{{ statisticData.cur.person }}</p>
          </el-col>
          <el-col :span="7" :offset="1">
            <p class="top-text padding-two">平均点击人次</p>
            <p class="number-big number-cur padding-two">{{ statisticData.cur.avg_visits }}</p>
          </el-col>
        </el-row>
      </el-card>
    </div> -->
    <img :src="urls.qrcode_url" width="150px" />
    <div style="width:100%;height:20px;" />
    扫码访问前端
    <!-- <div v-for="i in num" :ref="'analysisEchart' + i" :id="'analysisEchart' + i" :key="i" style="height: 280px; width: 25%; float:left" /> -->
    <div class="empty-10" />
    跳转链接： {{ urls.redirect_url }}
    <div v-for="i in num" :id="'analysisEchart' + i" :key="i" style="height: 280px; width: 25%; float:left" />
  </div>
</template>

<script>
import echarts from 'echarts'
import checkPermission from '@/utils/permission'
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import { getDayAgo } from '@/utils/index'

export default {
  name: 'Dashboard',
  components: { adminDashboard },
  data() {
    return {
      currentRole: 'adminDashboard',
      src: '',
      wxaCode: '',
      barDataList: [],
      num: 0,
      datepicker: [],
      statisticData: {
        total: {
          total: 0,
          person: 0,
          avg_visits: 0
        },
        cur: {
          total: 0,
          person: 0,
          avg_visits: 0
        }
      },
      urls: {
        qrcode_url: '',
        redirect_url: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    // this.initData()
  },
  mounted() {
    // setTimeout(() => { this.initData1() }, 300)
  },
  methods: {
    checkPermission,
    initData() {
      this.$api.enterprise.enterprise
        .generateQrcode()
        .then(res => {
          this.urls = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    initParam() {
      this.$api.system.systemConfig
        .queryByNames({
          data: { names: ['show_behavior_log'] }
        })
        .then(res => {
          this.num = res.data.show_behavior_log.length
          console.log(this.num)
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    initData1() {
      let start, end
      if (this.datepicker.length > 1) {
        start = this.datepicker[0]
        end = this.datepicker[1]
      } else {
        start = getDayAgo(6)
        end = getDayAgo(0)
        this.datepicker = [start, end]
      }
      //图表数据
      // this.$api.system.behavior
      //   .userAnalysis(start, end)
      //   .then(response => {
      //     this.barDataList = response.data
      //     this.drawBar()
      //   }).catch(error => {
      //     console.log(error)
      //   })

      // //访问量数据
      // this.$api.system.behavior
      //   .staticTotal(start, end)
      //   .then(response => {
      //     this.statisticData = response.data
      //   }).catch(error => {
      //     console.log(error)
      //   })
    },
    exportData() {
      let start, end
      if (this.datepicker.length > 1) {
        start = this.datepicker[0]
        end = this.datepicker[1]
      } else {
        start = getDayAgo(6)
        end = getDayAgo(0)
        this.datepicker = [start, end]
      }
      this.$api.system.behavior
        .exportData(start, end)
        .then(response => {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['访问日期 ', '访问模块', '访问次数']
            const filterVal = ['date', 'module_name', 'visits']
            const data = this.formatJson(filterVal, response.data)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: start + '-' + end + '行为数据表'
            })
          })
        }).catch(error => {
          console.log(error)
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    drawBar() {
      for (let i = 0; i < this.num; i++) {
        // const analysisEchart = echarts.init(this.$refs['analysisEchart' + (i + 1)])
        const analysisEchart = echarts.init(document.getElementById('analysisEchart' + (i + 1)))
        const analysis = this.barDataList[i]
        analysisEchart.clear()
        analysisEchart.setOption({
          title: analysis.title,
          color: analysis.color,
          tooltip: analysis.tooltip,
          legend: analysis.legend,
          toolbox: analysis.toolbox,
          calculable: true,
          xAxis: analysis.xAxis,
          yAxis: [{
            type: 'value'
          }],
          dataZoom: analysis.dataZoom,
          series: analysis.series
        })
      }
    }
  }
}
</script>
<style>
  .dashboard p {
    margin: 0;
    padding: 0;
  }
  .dashboard .box-card {
    float: left;
    width: 49%;
  }
  .dashboard .box-card-min {
    float: left;
    width: 10.5%;
  }
  .dashboard .box-card-margin {
    margin-right: 1%;
  }
  .dashboard .el-card__header {
    padding: 10px 20px !important;
  }
  .dashboard .el-card__body {
    padding: 8px 20px !important;
  }
  .dashboard .top-text {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .dashboard .number-cur{
    color: #666666;
  }
  .dashboard .number-big {
    font-size: 20px;
    font-weight: 600;
  }
  .dashboard .padding-two {
    padding: 2px;
  }
</style>

